<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '提交订单',
  },
}
</route>

<template>
  <view class="submit-order">
    <view class="m-3 bg-white rounded-2xl p-3">
      <text class="font-bold" style="margin: 30rpx">单据备注</text>
      <wd-textarea
        v-model="state.orderNote"
        placeholder="请输入单据备注，最多500字"
        :maxlength="500"
        custom-style="height: 500rpx"
      />
    </view>
    <view class="htm-bottom">
      <view class="total">
        <view class="flex items-center">
          <view>
            <text class="block text-sm">
              应付
              <text class="htm-theme-color font-bold text-lg">￥{{ shopcartTotal }}</text>
            </text>
          </view>
        </view>
        <view class="content">
          <htm-button @click="handleSubmit">提交订单</htm-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
//
import { submitOrder } from '@/service/shopcart/shopcart'
import { useShopcartStore } from '@/store/shopcart'
import { useProfileStore } from '@/store'

const profileStore = useProfileStore()
const shopcartStore = useShopcartStore()
const shopcartTotal = computed(() => shopcartStore.shopcartTotal)

const state = reactive({
  orderNote: '',
})
const handleSubmit = async () => {
  try {
    const response = await submitOrder({
      orderNote: state.orderNote,
      storeCode: profileStore.chargeStore.storeCode,
    })
    if (response.success) {
      const { orderCode, totalAmount, receiveInfo } = response.result
      uni.navigateTo({
        url: `/pages/submit-success/submit-success?orderCode=${orderCode}&totalAmount=${totalAmount}&receiveInfo=${receiveInfo}`,
      })
      shopcartStore.initShopcart(profileStore.chargeStore.storeCode)
    } else {
      uni.showToast({
        title: response.message,
        icon: 'none',
      })
    }
  } catch (e) {}
}
</script>

<style lang="scss" scoped>
//
.htm-bottom {
  position: fixed;
  bottom: 0;
  height: calc(100rpx + constant(safe-area-inset-bottom));
  height: calc(100rpx + env(safe-area-inset-bottom));
  background-color: #fff;
}
.total {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  height: 100rpx;
  padding: 0 30rpx;
  background: hsla(0, 0%, 100%, 0.95);
  .content {
    display: flex;
    align-items: center;
    text {
      // margin-right: 20rpx;
      font-size: 28rpx;
    }
  }
}
</style>
